<template>
	<view class="content">
		<view class="img">
			<image src="../../static/img/user/class-03.png" mode="widthFix" @click="to()"></image>
			<image src="../../static/img/user/avatar.jpg" mode="widthFix"></image>
		</view>
		
		<view class="border">
			<view class="dd" @click="go(0)">
				<view class="qb">
					<image src="../../static/img/user/icon-order.png" mode="widthFix"></image>
					<label>全部订单</label>
				</view>
				<u-icon name="arrow-right" color="black" size="20"></u-icon>
			</view>
			<view class="ul">
				<view class="li" @click="go(0)">
					<image src="../../static/img/user/status-01.png" mode="widthFix"></image>
					<label>待付款</label>
				</view>
				<view class="li" @click="go(1)">
					<image src="../../static/img/user/status-02.png" mode="widthFix"></image>
					<label>待发货</label>
				</view>
				<view class="li" @click="go(2)">
					<image src="../../static/img/user/status-03.png" mode="widthFix"></image>
					<label>待收货</label>
				</view>
				<view class="li" @click="go(3)">
					<image src="../../static/img/user/status-04.png" mode="widthFix"></image>
					<label>待评价</label>
				</view>
				<view class="li" @click="go(0)">
					<image src="../../static/img/user/status-05.png" mode="widthFix"></image>
					<label>全部</label>
				</view>
			</view>
		</view>
		
		<view class="ul2">
			<view class="li2">
				<view class="div">
					<image src="../../static/img/user/icon-address.png" mode="widthFix"></image>
					<label>收获地址</label>
				</view>
				<u-icon name="arrow-right" color="black" size="20"></u-icon>
			</view>
			<view class="li2">
				<view class="div">
					<image src="../../static/img/user/icon-kefu.png" mode="widthFix"></image>
					<label>客服中心</label>
				</view>
				<u-icon name="arrow-right" color="black" size="20"></u-icon>
			</view>
			<view class="li2">
				<view class="div">
					<image src="../../static/img/user/icon-collect.png" mode="widthFix"></image>
					<label>我的收藏</label>
				</view>
				<u-icon name="arrow-right" color="black" size="20"></u-icon>
			</view>
			<view class="li2">
				<view class="div">
					<image src="../../static/img/user/icon-about.png" mode="widthFix"></image>
					<label>帮助中心</label>
				</view>
				<u-icon name="arrow-right" color="black" size="20"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			go(index){
				uni.navigateTo({
					url:`/page_order/order/order?index=${index}`
				})
			},
			to(){
				uni.navigateTo({
					url:'/page_sz/sz/sz'
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #f2f2f2;
	}
	.img{
		height: 200px;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.img image:first-child{
		width: 35px;
		position: absolute;
		left: 35px;
		top: 30px;
	}
.img image{
	border-radius: 50px;
	width: 90px;
}
.border{
	border-radius: 20px;
	background-color: white;
	margin-left: 10px;
	margin-right: 10px;
	
}
.border .dd{
	display: flex;
	
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #f2f2f2;
	justify-content: space-between;
}
.border .dd .qb{
	display: flex;
	align-items: center;
}
.border .dd image{
	width: 30px;
	border-radius: 50px;
	margin-left: 20px;
	
}
.border .dd label{
	margin-left: 15px;
	
}
.border .dd .u-icon{
	margin-right: 10px;
}
.border .ul{
	display: flex;
	justify-content: space-around;
	margin-top: 20px;
	padding-bottom: 20px;
}
.border .ul .li{
	display: flex;
	flex-direction: column;
	text-align: center;
}
.border .ul .li image{
	width: 45px;
	margin-bottom: 5px;
}
.ul2{
	background-color: white;
	margin-top: 20px;
	margin-left: 10px;
	margin-right: 10px;
	border-radius: 20px;
}
.ul2 .li2{
	padding-top: 10px;
	display: flex;
	justify-content: space-between;
	margin-left: 10px;
	padding-bottom: 5px;
	border-bottom: 1px solid #f2f2f2;
}
.ul2 .li2 .div{
	display: flex;
	align-items: center;
}
.ul2 .li2 image{
	width: 45px;
	margin-bottom: 5px;
	margin-right: 20px;
}
.ul2 .li2 .u-icon{
	margin-right: 5px;
}
</style>
